<template>
    <div class="r-list">
        <div class="r-box">
            <Temp v-for="item in list" :item="item" :key="item.id" @click="goPage(item)"></Temp>
            <!-- <div class="r-item c-title-5" v-for="item in list" :key="item.id" v-html="item.txt"></div> -->
        </div>
        <div class="r-box">
            <Temp v-for="item in list" :item="item" :key="item.id" @click="goPage(item)"></Temp>
            <!-- <div class="r-item c-title-5" v-for="item in list" :key="item.id" v-html="item.txt"></div> -->
        </div>
        <div class="r-box">
            <Temp v-for="item in list" :item="item" :key="item.id" @click="goPage(item)"></Temp>
            <!-- <div class="r-item c-title-5" v-for="item in list" :key="item.id" v-html="item.txt"></div> -->
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, onMounted } from "vue";
import { uuidCreate } from "@/comm/uuid";
import { get } from "@/comm/request";
import { URL_SCROLL_NEWS } from "@/comm/api";
import { formatTimeAgo } from "@/comm/format";
import Temp from "./temp.vue";
import { onUnmounted } from "vue";
import { useCore } from "@/hooks/useCore";
import i18n from "@/locals";

const warpData = (txt: string) => {
    return {
        id: uuidCreate(),
        txt: txt
    };
};

let tid = 0;
const core = useCore();

onMounted(async () => {
    let res: any = await get(URL_SCROLL_NEWS);
    console.log("##jsz", res.data);
    list.value = res.data.map((item: any) => {
        return {
            ...item,
            id: uuidCreate(),
            ago: formatTimeAgo(item.eventTime)
        };
    });
    console.log(list.value, "listlist");
    list.value.push({
        title: i18n.global.t("message.JFooter.f"),
        isTips: true
    });
    tid = window.setInterval(updateTime, 2000);
});

onUnmounted(() => {
    window.clearInterval(tid);
});

function updateTime() {
    list.value.forEach(i => (i.ago = formatTimeAgo(i.eventTime)));
}
// 跳转方法
function goPage(item: any) {
    if (item.isTips) {
        return;
    }
    console.log(item);
    if (item.symbol) {
        core.switchCoinByName(item.symbol);
    } else if (item.transactionHash) {
        window.open("https://etherscan.io/tx/" + item.transactionHash);
    }
}

function getHtml(item: any) {
    let time = formatTimeAgo(item.eventTime);
    let name = item.symbol;
    let num = item.priceChangePercent + "%";
    return `${time} ${name} ${num}`;
}

// const temp = [
//     `3小时前大笔买入<span class="win-color">1000</span>ETH`,
//     "2小时 大笔转入 ETH",
//     "3小时 大笔转入 ETH",
//     `4小时 大笔转入 <span class="lose-color">56000</span>ETH`,
//     "5小时 大笔转入 ETH",
//     "6小时 大笔转入 ETH",
//     `7小时 大笔转入 <span class="lose-color">1402</span>ETH`,
//     "8小时 大笔转入 ETH",
//     "9小时 大笔转入 ETH",
//     "10小时 大笔转入 ETH",
//     "11小时 大笔转入 ETH",
//     "12小时 大笔转入  ETH"
// ];

const list = ref<any[]>([]);
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
